import { QuestionCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Tooltip } from 'antd';
import cls from 'classnames';
import React from 'react';
import Carousel from './Carousel';
import Styles from './OperatingInfo.less';

export interface OperatingStatus {
  OperatingTitle?: React.ReactNode;
  OperatingCount?: number | string;
  OperatingUnit?: string;
  OperatingTip?: string;
}

export interface OperatingInfoProps {
  isOldStation?: boolean;
  statuses?: OperatingStatus[];
}

const OperatingInfo: React.FC<OperatingInfoProps> = ({ statuses = [], isOldStation = false }) => {
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';

  // 将 statuses 数据分成每页 6 条数据
  const chunkedStatuses = [];
  for (let i = 0; i < statuses.length; i += 6) {
    chunkedStatuses.push(statuses.slice(i, i + 6));
  }

  const slides = chunkedStatuses.map((chunk, index) => ({
    content: (
      <div key={index} className={Styles.OperatingSlide}>
        {chunk.map((status, idx) => (
          <div key={idx} className={Styles.OperatingItem}>
            <p className={Styles.OperatingTitle}>
              {status.OperatingTitle}
              {status.OperatingTip && (
                <Tooltip title={status.OperatingTip}>
                  <QuestionCircleOutlined style={{ marginLeft: 4 }} />
                </Tooltip>
              )}
            </p>
            <p className={Styles.OperatingDetails}>
              {status.OperatingCount}{' '}
              {status.OperatingUnit && (
                <span className={Styles.OperatingUnit}>{status.OperatingUnit}</span>
              )}
            </p>
          </div>
        ))}
      </div>
    ),
  }));

  if (isEnglish && isOldStation) {
    return <Carousel autoPlay={true} slides={slides} interactionMode={'hover'} />;
  } else {
    return (
      <ul className={cls(Styles.OperatingWrap, isOldStation && Styles.OldStation)}>
        {statuses.map((status, index) => (
          <li key={index} className={Styles.OperatingList}>
            <p className={Styles.OperatingTitle}>
              {status.OperatingTitle}
              {status.OperatingTip && (
                <Tooltip title={status.OperatingTip}>
                  <QuestionCircleOutlined style={{ marginLeft: 4 }} />
                </Tooltip>
              )}
            </p>
            <p className={Styles.OperatingDetails}>
              {status.OperatingCount}{' '}
              {status.OperatingUnit && (
                <span className={Styles.OperatingUnit}>{status.OperatingUnit}</span>
              )}
            </p>
          </li>
        ))}
      </ul>
    );
  }
};

export default OperatingInfo;
